<script setup lang="ts">
import { computed, reactive, ref } from 'vue';
import { router } from '../router';
import axios from '../axios'
import { ElMessage, ElMessageBox } from 'element-plus';
import Questions from '../components/Questions.vue';
import { ApplicationInfo, Status, Template, statusToString } from '../model';
import { User } from '../model';
import { MoreFilled } from '@element-plus/icons-vue'
import StatusTag from '../components/StatusTag.vue';

const applicationId = computed(() => parseInt(<string> router.currentRoute.value.params.id))

const application = ref<ApplicationInfo>()


const approvers = reactive<Map<number, User>>(new Map())


const loadData = async () => {
    const res = await axios.get(`/applicationInfo?applicationId=${applicationId.value}`)
    if (!res.data['ok']) {
        ElMessage({
            type: 'error',
            message: '加载申请数据失败',
        })
        return
    }

    application.value = res.data
    application.value?.progress.reverse()

    approvers.clear()
    Promise.all(application.value!.approvers.map(a => new Promise(async (resolve, reject) => {
        const res = await axios.get(`/user?userId=${a.approverId}`)
        if (!res.data['ok']) {
            ElMessage({
                type: 'error',
                message: '加载用户信息失败',
            })
            reject()
            return
        }
        approvers.set(a.approverId, res.data['user'])
        resolve(undefined)
    })))

}

loadData()

const confirmApplication = async () => {
    const res = await axios.post('/applicant/application/confirm', {
        applicationId: application.value?.application.id,
    })
    if (!res.data['ok']) {
        ElMessage({
            type: 'error',
            message: '确认申请失败',
        })
        return
    }
    ElMessage({
        type: 'success',
        message: '确认完成',
    })

    loadData()
}

</script>

<template>
    <div class="application-info">
        <div class="application-info-header">
        <el-page-header
            title="返回"
            @back="router.back()"
        >
            <template #content>
                <div class="application-info-header-title">
                    <div style="margin-right: 15px;">
                        {{ application?.template.tableName }}
                    </div>
                    <StatusTag :status="application?.status" />
                </div>
            </template>
            <template #extra>
                <el-button @click="router.push(`/application/view/${applicationId}`)">详情</el-button>
                <el-button v-if="application?.status == 'REJECTED'" type="warning" @click="router.push(`/application/new/fill/${application?.template.id}`)">重新发起</el-button>
                <el-button v-if="application?.status != 'PENDING' && !application?.application.confirmed" type="primary" @click="confirmApplication">确认申请</el-button>
            </template>
        </el-page-header>
        </div>
        
        <el-divider />
        <div class="progress-wrap">
            <el-scrollbar>
                <el-timeline
                    style="width: calc(100% - 100px); padding-top: 20px;"
                >
                  <el-timeline-item
                      v-if="application?.status === Status.PENDING"
                      :timestamp="approvers.get(application?.approvers[application?.progress.length].approverId)?.nickname"
                      placement="top"
                      size="large"
                      class="custom-timeline-item"
                  >
                        <div class="card-title">
                            待审批
                        </div>
                    </el-timeline-item>

                    <el-timeline-item
                        v-for="progress in application?.progress"
                        :timestamp="progress.submitTime + '&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;' + approvers.get(progress.approverId)?.nickname"
                        :type="progress.approve ? 'success' : 'danger'"
                        placement="top"
                        size="large"
                    >
                        <el-card>
                            <template #header>
                                <div class="card-title">
                                    {{ progress.approve ? '同意' : '拒绝' }}
                                </div>
                            </template>
                            <p>{{ progress.opinion }}</p>
                        </el-card>
                    </el-timeline-item>
                    <el-timeline-item
                        :timestamp="application?.application.creationTime + '&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;' + application?.applicant.nickname"
                        type="info"
                        placement="top"
                        size="large"
                    >
                        <div class="card-title">
                            创建
                        </div>
                    </el-timeline-item>
                </el-timeline>
            </el-scrollbar>
        </div>
    </div>
</template>

<style scoped>
.application-info {
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    height: 100%;
}
.application-info-header {
    width: calc(100% - 50px);
    padding-top: 20px;
}
.progress-wrap {
    flex: 1;
    width: 80%;
    overflow: auto;
}
.application-info-header-title {
    display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: center;
}
.card-title {
    font-size: large;
    font-weight: bold;
}
.custom-timeline-item {
  color: #1890ff; /* 设置时间线项的图标和文字颜色 */
}

</style>